<template>
  <div class="login2">
    <div class="back" @click="$router.go(-1)">
      <img src="@/assets/img/login/返回.png" alt="" />
    </div>
    <div class="wen">
      <p>请输入验证码</p>
      <span>验证码已发送至 {{ $route.query.phone }}</span>
    </div>

    <!-- 密码输入框 -->
    <van-password-input
      :value="value"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
      :length="4"
      :error-info="errorInfo"
    />
    <!-- 按钮 -->
    <van-button type="primary" :disabled="!isDis" @click="time">{{
      content
    }}</van-button>
    <!-- 数字键盘 -->
    <van-number-keyboard
      v-model="value"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    />
  </div>
</template>

<script>
import { postLoginCode, postSmsLog } from "@/services";
export default {
  data() {
    return {
      value: "",
      errorInfo: "",
      showKeyboard: false,
      isDis: true,
      content: "重新发送",
      num: 60,
      timer: "",
    };
  },
  watch: {
    value(value) {
      if (value.length > 4) {
        this.value = this.value.substring(0, 4);
      }
      if (value.length === 4) {
        postLoginCode({ phone: this.$route.query.phone, code: value }).then(
          (res) => {
            if (res.data.code == 100000) {
              localStorage.setItem("uids", res.data.data);
              localStorage.setItem("phone", this.$route.query.phone);
              this.$router.push({
                path: "/login3",
              });
            } else {
              this.errorInfo = res.data.msg;
            }
          }
        );
        // if (value !== "1234") {
        //   this.errorInfo = "验证码错误";
        // } else {
        //   localStorage.setItem("uids", "3");
        //   localStorage.setItem("phone", this.$route.query.phone);
        //   this.$router.push({
        //     path: "/login3",
        //   });
        // }
      } else {
        this.errorInfo = "验证码错误";
      }
    },
  },
  methods: {
    time() {
      postSmsLog(this.$route.query.phone);
      this.isDis = false;
      this.num = 60;
      this.timer = setInterval(() => {
        this.num--;
        this.content = `重新发送(${this.num})`;
        if (this.num <= 0) {
          clearInterval(this.timer);
          this.isDis = true;
          this.content = "重新发送";
        }
      }, 1000);
    },
  },
};
</script>

<style lang="scss">
.login2 {
  .back {
    margin-top: 60px;
    margin-left: 30px;
    img {
      width: 24px;
      height: 36px;
    }
  }
  .wen {
    margin-top: 74px;
    margin-left: 70px;
    p {
      font-size: 48px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 80px;
    }
    span {
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
    }
  }
  .van-password-input {
    height: 110px;
    padding: 0 66px;
    margin: 0;
    margin-top: 68px;

    .van-password-input__security {
      height: 100px;
    }
    .van-password-input__security::after {
      border: none;
    }
    .van-hairline--left::after {
      border: none;
    }
    .van-password-input__security li {
      background-color: #2d2d2d;
      margin-left: 74px;
    }
    .van-password-input__security li:first-child {
      margin-left: 0px;
    }
    .van-password-input__error-info {
      margin-top: 100px;
      font-size: 40px;
    }
  }
  .van-number-keyboard {
    background-color: #323232;
    height: 510px;
    display: flex;
    .van-key {
      margin: 0 auto;
      width: 234px;
      height: 88px;
      font-size: 50px;
      background-color: #707070;
      color: #fff;
    }
  }
  .van-button--normal {
    display: block;
    width: 618px;
    height: 88px;
    font-size: 30px;
    margin: 0 auto;
    border-radius: 44px;
    background-color: #64d296;
    margin-top: 264px;
  }
}
</style>
